const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    //开发服务器devServerL用于自动化（自动编译，自动打开浏览器，自动刷新浏览器）
    //特点：只会在内存中编译打包，不会有任何输出
    //启动指令 npx webpack serve
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,  //是否启动gzip压缩
        port: 9000,//端口号
        open: true //是否自动打开
    },
    module: {
        rules: [
            {
                test: /\.less$/i,
                use: [
                    //use数组中loader执行顺序：从右到左，从下到上，依次执行
                    'style-loader',
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'css-loader',
                    //将css文件变成commonjs模块加载js中，里面内容是样式字符串
                    'less-loader'
                ]
            },
            {
                test: /\.css$/i,
                use: [
                    //use数组中loader执行顺序：从右到左，从下到上，依次执行
                    'style-loader',
                    //创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'css-loader',
                    //将css文件变成commonjs模块加载js中，里面内容是样式字符串
                ]
            },
            // {
            //     test: /\.(png|svg|jpg|jpeg|gif)$/i,
            //     type: 'asset/resource',
            //     generator: {
            //         filename: 'static/[hash][ext][query]' //局部指定输出位置
            //     }
            // },
            // {
            //     test: /\.(jpe?g|png|svg|gif)/i,
            //     type: 'asset/inline',
            // },
            {
                test: /\.(jpe?g|png|svg|gif)/i,
                type: 'asset',
                generator: {
                    filename: 'img/[hash][ext][query]' // 局部指定输出位置
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 8 * 1024 // 限制于 8kb
                    }
                }
            },
            {
                test: /\.html$/i,
                loader: "html-loader",
                options: {
                    esModule: false,
                }
            }
        ]

    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
    ],
    mode: 'development'
}